<html>
<head>
  <style>
    body { padding: 20px }
    input { outline: 1px solid #ccc }
  </style>
</head>
<body>
  <h1>Hello</h1>
  <input>

  <script>
    document.querySelector('input').onchange = (e) => {
      document.querySelector('h1').textContent = `Hello ${e.target.value}`
    }
  </script>
</body>
</html>
